const tbody = document.querySelector('tbody');
// 获取后台数据
function getData() {
    axios.get('/student/list').then(r => {
        const arr = r.data.data;
        const html = arr.reduce((h, v) => h + `
        <tr>
            <th scope="row">${v.id}</th>
            <td>${v.name}</td>
            <td>${v.age}</td>
            <td>${v.sex}</td>
            <td>${v.group}</td>
            <td>${v.phone}</td>
            <td>${v.salary}</td>
            <td>${v.truesalary}</td>
            <td>${v.province + v.city + v.county}</td>
            <td>
              <button type="button" data-id=${v.id} class="btn btn-primary btn-sm upbtn">修改</button>
              <button type="button" data-id=${v.id} class="btn btn-danger btn-sm deletebtn">删除</button>
            </td>
          </tr>
        `, "")
        tbody.innerHTML = html;
    })
}
// 添加学员 编辑学员  下拉框
// 获取下拉框列表的数据  封装
function getSelect(url, params, dom, lable, value = '') {
    axios.get(url, { params }).then(r => {
        const arr = r.data;
        dom.innerHTML = arr.reduce((h, v) => h + `
        <option value="${v}">${v}</option>
        `, `<option value="">--${lable}--</option>`);
        dom.value = value;
    })
}

// 添加学员功能
function postAdd() {
    const addform = document.querySelector('#addModal form');
    addModal.addEventListener('submit', function (e) {
        e.preventDefault();
        const data = $(addform).serialize();
        axios.post('/student/add', data).then(r => {
            if (r.data.code === 0) {
                //重置表单
                addform.reset();
                //toastr弹框
                toastr.success(r.data.message);
                //重新渲染页面
                getData();
                //手动关闭模态框
                $('#addModal').modal('hide');
            }
        });
    })
}

// 渲染页面
getData();

//初始化下拉框
function selectol(add) {
    // 获取省的下拉列表
    const selectprovince = document.querySelector(`${add} [name=province]`);
    // 获取市的下拉列表
    const selectcity = document.querySelector(`${add} [name=city]`);
    // 获取县的下拉列表
    const selectcounty = document.querySelector(`${add} [name=county]`);

    //get获取省
    getSelect('/geo/province', {}, selectprovince, '省')

    // 给省  绑定change事件  获取市的数据
    selectprovince.addEventListener("change", function () {
        //获取市的数据
        getSelect('/geo/city', { pname: selectprovince.value }, selectcity, '市')
    })

    // 给市绑定change事件  获取县的数据
    selectcity.addEventListener("change", function () {
        // 获取县的数据
        getSelect('/geo/county', { pname: selectprovince.value, cname: selectcity.value }, selectcounty, '县')
    })

}

//模态框  下拉框 添加初始化
selectol('#addModal');

//模态框  下拉框 编辑初始化
selectol('#updateModal');

//添加学员
postAdd();

//修改学员--信息显示在表单上  删除学员
tbody.addEventListener("click", function (e) {
    if (e.target.classList.contains('upbtn')) {
        //显示弹出框
        $('#updateModal').modal('show');
        //获取id
        const id = e.target.dataset.id;
        //根据id发送请求获取数据请求
        axios.get("/student/one", {
            params: {
                id,
            }
        }).then(r => {
            console.log(r.data.data);
            const obj = r.data.data;
            for (const key in obj) {
                //查找每个属性的值  放进输入框里
                const inputs = document.querySelector(`#updateModal [name=${key}]`);

                if (key === 'sex') {
                    document.querySelector(`#updateModal [name=${key}][value=${obj[key]}]`).checked = true;
                    continue //跳过下面的代码  性别需要单独设置
                }
                // 当属性存在才执行
                if (inputs) {
                    inputs.value = obj[key];
                }
            }

            // 获取城市到表单上 参数添加市的数据
            getSelect('/geo/city', { pname: obj.province }, document.querySelector('#updateModal [name=city]'), '市', obj.city)

            // 获取县到表单上 参数添加省和市的数据
            getSelect('/geo/county', { pname: obj.province, cname: obj.city }, document.querySelector('#updateModal [name=county]'), '市', obj.county)
        })
    } else if (e.target.classList.contains('deletebtn')) {
        //获取id
        const id = e.target.dataset.id;
        axios.delete('/student/delete', {
            params: {
                id
            }
        }).then(r => {
            //重新渲染页面
            getData();
            //弹框提示
            toastr.success(r.data.message);
        })
    }
})

//确认修改功能
const updateform = document.querySelector('#updateModal form');
updateform.addEventListener('submit', function (e) {
    e.preventDefault();
    const data = $(updateform).serialize();
    axios.put('/student/update', data).then(r => {
        if (r.data.code === 0) {
            // 关闭模态框
            $('#updateModal').modal('hide');
            // 重新渲染页面
            getData();
            //重置表单
            updateform.reset();
            // 弹出框
            toastr.success(r.data.message);
        }
    });
})


